<template>
  <div class="header-content is-center">
    <h1 class="header-content-title">古往今来</h1>
    <h2 class="header-content-desc">谁家今夜扁舟子，何处相思明月楼？</h2>
    <h3 class="header-content-author">《春江花月夜》 - 唐代 - 张若虚</h3>
  </div>
</template>

<script>
export default {
  name: "HeaderContent",
};
</script>

<style lang="stylus" scoped>
.header-content-title {
  color: #fff;
  line-height: 0.6rem;
  font-size: 0.5rem;
  font-weight: 700;
  font-family: 'Playball', cursive;
  text-shadow: 0 0.03rem 0.06rem rgba(0, 0, 0, 0.3);
}

.header-content-desc, .header-content-author {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  margin: 0;
  text-shadow: 0 0.03rem 0.06rem rgba(0, 0, 0, 0.5);
}

.header-content-desc {
  font-size: 0.22rem;
  overflow: hidden;
  font-family: 'Long Cang', cursive;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  -webkit-animation: fade-in-down 1s;
  animation: fade-in-down 1s both;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.header-content-author {
  font-size: 0.15rem !important;
  font-family: 'Ubuntu Mono', monospace;
  line-height: 0.2rem;
  -webkit-animation: fade-in-down 1s;
  animation: fade-in-down 1s both;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
</style>